<template>
  <el-upload
    action="none"
    
    accept=".jpg,.jpeg,.png,.JPG,.JPEG"
    :show-file-list="false"
    :on-change="beforeAvatarUpload"
    :auto-upload="false">
    <div class="upload-box" v-if="!props.modelValue">
      <el-icon><Plus /></el-icon>
      <span>点击上传</span>
    </div>
    <div class="image-box" v-else>
      <el-image style="width: 100%; height: 100%" :src="props.modelValue" fit="cover" />
      <div class="mask">更换封面</div>
    </div>
  </el-upload>
  <!-- <div class="upload-file-box"  @mouseover="mouseOver" @mouseleave="mouseLeave">
    <el-image style="width: 100%; height: 100%" :src="props.modelValue" fit="cover" />
    <el-icon v-if="isShow" @click="delFile" class="del" :style="{ fontSize: '18px'}">
      <Delete />
    </el-icon>
    <div class="hover-img"></div>
  </div> -->
  <!-- <div class="upload-file-text">图片支持JPG、PNG、JPEG格式，大小2M以内，建议宽高比为1：1，尺寸200px*200px。</div> -->
</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed, isShallow } from 'vue'
import { ElForm, ElMessage, ElMessageBox, UploadProps, FormRules } from 'element-plus'
import { uploadFile2 } from '@/api/common'

interface Props {
  modelValue: string
}
const isShow = ref(false)
const mouseOver = () => {
  isShow.value = true
}
const mouseLeave = () => {
  isShow.value = false
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: ''
})
const emit = defineEmits(['update:modelValue', 'change'])

const beforeAvatarUpload= (rawFile: any)  => {
  let flag = true
  if (!rawFile) {
    flag = false
  }
  const types = ['jpg', 'jpeg', 'png']
  if(!types.includes(rawFile.name.split('.')[1])){
    ElMessage.error('图片格式不正确！')
    flag = false
  }
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('上传图片大小不能超过2M')
    flag = false
  }
  flag && uploadFun(rawFile.raw, rawFile.name)
}

const uploadFun = (file: any, fileName: string) => {
  uploadFile2({
    file,
    fileName
  }).then((r: any) => {
    console.log('rrrrr - - -   ', r)
    const {url} = r
    emit('update:modelValue', url)
    emit('change', r)
  })
}

const delFile = ()=>{
  emit('update:modelValue', '')
  emit('change', null)
}


</script>
<style scoped lang="scss">
$length: 100px;

  .upload-box{
    border: 1px dashed #FF6B00;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: $length;
    height: $length;
    background-color: #f8f8f8;
    box-sizing: border-box;
    .el-icon{
      color: #FF6B00;
      font-size: 40px;
    }
    span{
      padding-top: 8px;
      font-size: 12px;
      color: #666;
      letter-spacing: 1px;
    }
  }

  .image-box{
    width: $length;
    height: $length;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    &:hover{
      .mask{
        visibility: visible;
      }
    }
    .el-image{
      width: 100%;
      height: 100%;
    }
    .mask{
      visibility: hidden;
      position: absolute;
      left: 0;
      bottom: 0;
      width: $length;
      height: 30px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.4);
    }

  }

  .upload-file-box{
    width: $length;
    height: $length;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    .hover-img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
    }
    .hover-img:hover{
      // background-color: rgba(255,255,255,0.72);
      // opacity: 1;
    }
    .del{
      z-index: 9;
      position: absolute;
      right: 4px;
      top: 4px;
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: #ccc;
      color: #fff;
      &:hover{
        cursor: pointer;
        background-color: rgba(255,255,255,0.72);
        opacity: 1;
      }
    }
  }
  .upload-file-text{
    margin-top: 10px;
    line-height: 1.4;
    font-size: 12px;
    color: #999;
  }
</style>
